<template>
  <div class="box-b p10">
    <div class="w box-b">
      <lm-form :ref="editFormRefKey" inline label-width="120px" class="lm-w lm-h" :layout="layout"
        v-model="editForm">
        <template #type>
          <div class="w">
            <mark-type v-model="projectType"></mark-type>
          </div>
        </template>
      </lm-form>
      <div class="lm-w lm-h lm-f-s">
        <div class="lm-w-120 lm-h"></div>
        <el-button type="primary" @click="submit(true)">创建并导入</el-button>
        <el-button @click="submit(false)">完成创建</el-button>
        <el-button type="danger" @click="reset" plain>重置</el-button>
        <el-button type="primary" @click="goBackToPage()" plain>返回</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { type ValidateFieldsError } from 'async-validator'
import { Collection } from '@/apis/collection'
import { type RequestCode } from '@/server/base'
import { Project } from '@/apis/project'
import markType from '../components/mark-type.vue'

export default {
  name: 'cratedCollection',
  mixins: [frameProperty],
  props: {
    goBackToPage: Function,
    params: [Array, Object]
  } as any,
  components: { markType },
  data() {
    return {
      editFormRefKey: 'createdCollectionRef',
      editForm: {} as any,

      projectType: 0,

      layout: [
        {
          prop: 'projectId',
          label: '数据集组',
          type: 'select',
          required: true,
          clearable: true,
          itemClass: 'column_1',
          options: [
            // { value: '1', label: 'ARJ' },
            // { value: '2', label: 'C919' },
            // { value: '3', label: '车间' }
          ]
          // value: '1'
        },
        {
          prop: 'name',
          label: '数据集名称',
          type: 'input',
          itemClass: 'column_1',
          required: true,
          clearable: true
        },

        {
          prop: 'dataType',
          label: '数据类型',
          type: 'radio-button',
          required: true,
          clearable: true,
          itemClass: 'column_1',
          options: [
            { value: '1', label: '图片' },
            { value: '2', label: '文本' },
            { value: '3', label: '视频' }
          ],
          value: '1'
        },
        {
          prop: 'version',
          label: '数据集版本',
          type: 'input',
          itemClass: 'column_1',
          required: true,
          clearable: true,
          value: 'v1.0'
        },
        {
          prop: 'type',
          label: '标注类型',
          type: 'slot',
          itemClass: 'column_1',
          required: true,
          clearable: true,
          options: [
            { value: '1', label: '图片分类' },
            { value: '2', label: '图片检测' },
            { value: '3', label: '图片分割' }
          ],
          value: '1'
        }
      ]
    }
  },
  methods: {
    /**
     * 查询数据组
     */
    getProjectList() {
      const findIndex = this.layout.findIndex((item: { prop: string }) => item.prop == 'projectId')
      if (findIndex < 0) {
        return
      }
      Project.list()
        .then((res: RequestCode) => {
          this.layout[findIndex].options = res.data.map(
            ({ id, name }: { id: string; name: string }) => {
              return { label: name, value: id + '' }
            }
          )
        })
        .catch(() => {})
    },
    saveInfo(isContinue: boolean) {
      const findIndex = this.layout.findIndex((item: { prop: string }) => item.prop == 'projectId')
      const options = this.layout[findIndex].options as any[]
      let params = this.editForm as any
      params.projectName = options.filter(
        (item: { value: string | number; label: string }) => item.value == params.projectId
      )?.[0]?.label

      Collection.saveImageCollection(params).then((res: RequestCode) => {
        this.$message({ type: 'success', message: '操作完成！' })
        if (!isContinue) {
          this.goBackToPage(true)
          return
        }
        const isEdit = !this.editForm.id ? this.urlPathCode.FALSE : this.urlPathCode.TRUE
        this.$router.push({
          name: 'importCollection',
          params: {
            isEdit,
            value: this.getParamsString({ ...this.editForm, photoListId: res.data })
          }
        })
      })
    },
    //验证数据
    submit(isContinue: boolean) {
      const editFormRef = this.$refs[this.editFormRefKey] as any
      editFormRef.validate((isValid: boolean, invalidFields?: ValidateFieldsError) => {
        if (!isValid) {
          //滚动到未通过校验的字段
          if (invalidFields && Object.keys(invalidFields).length > 0) {
            editFormRef.scrollToField(Object.keys(invalidFields)[0])
          }
          return
        }
        this.saveInfo(isContinue)
      })
    },
    //重置
    reset() {
      this.editForm = {}
    }
  },
  created() {
    setTimeout(() => {
      if (!!this.params.projectId) {
        this.editForm.projectId = this.params.projectId
      }
    }, 200)
    this.getProjectList()
  }
}
</script>

<style lang="scss" scoped></style>